@extends("base.base")
@include('Cart.header')
@section("main")
    <link rel="stylesheet" href="{{asset(env('CDN_HOST').'/public/css/cart/index.css')}}">
    <main id="main" class="main">
        <div class="cart-info">
            <ul class="nav-ul cart-info-ul">
                <li class="nav-li cart-info-li">一冉再自品牌</li>
                <li class="nav-li cart-info-li">30天无忧退货</li>
                <li class="nav-li cart-info-li">48小时快速退款</li>
                <span class="clear-both"></span>
            </ul>
        </div>
        <div id="main-list" class="main-list">
            @foreach($cart as $key => $value)
                <ul class="list-ul">
                    @foreach($value as $k => $v)
                        <li class="list-li list-box" data-cart-id="{{$v["cart_id"]}}">
                            <div class="box-check">
                                <span class="circle list-circle"></span>
                            </div>
                            <a href="/commodity/{{$v["commodity_id"]}}">
                                <div class="box-img">
                                    <img src="{{asset($v["info_img_url"])}}" alt="">
                                </div>
                            </a>
                            <div class="box-info">
                                <div class="cnt">
                                    <a href="/commodity/{{$v["commodity_id"]}}">
                                        <p class="line1">
                                                <span class="line1-name">
                                                    <span>{{$v["commodity_name"]}}</span>
                                                </span>
                                            <span class="line1-num">
                                                    <span>x</span>
                                                    <span class="commodity-number">{{$v["number"]}}</span>
                                                </span>
                                        </p>
                                        <p class="line2">{{$v["commodity_color_name"]}}
                                            ; {{$v["commodity_size_name"]}}</p>
                                    </a>
                                    <div class="line3">
                                            <span class="line3-price">
                                                <span>¥</span>
                                                <span class="commodity-price"
                                                      data-unit-price="{{$v["unit_price"]}}">{{$v["all_price"]}}</span>
                                            </span>
                                        @if($v["number"] > 1)
                                            <div class="m-selnum msd-none m-selnum-1 dl"
                                                 style="border-left:0.1rem solid #666666">
                                                <div class="m-selnum-minus msm-none"
                                                     style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;color: #666666">
                                                    -
                                                </div>
                                                @else
                                                    <div class="m-selnum msd-none m-selnum-1 dl"
                                                         style="border-left:0.1rem solid #f1f1f1">
                                                        <div class="m-selnum-minus msm-none"
                                                             style="border-top: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;color: #f1f1f1">
                                                            -
                                                        </div>
                                                        @endif
                                                        <div class="textWrap">
                                                            <input class="textWrap-input" type="tel"
                                                                   value="{{$v["number"]}}"
                                                                   disabled="">
                                                        </div>
                                                        <div class="m-selnum-plus more">
                                                            +
                                                        </div>
                                                    </div>
                                            </div>
                                    </div>
                                </div>
                        </li>
                    @endforeach
                </ul>
            @endforeach
        </div>
        @include('Cart.footer_edit')
        <script>
            var cart = <?= array_to_json($cartData)?>;
            var cart_all = {
                number: 0,
                price: 0
            }
            $(".m-selnum-plus").on('click', function () {
                parent = $(this).parents('.list-box')
                var key = "cart" + parent.attr("data-cart-id")
                cart[key].number++
                cart[key].all_price = cart[key].number * cart[key].price
                up_cart_num(parent, key)
            })

            $(".m-selnum-minus").on('click', function () {
                parent = $(this).parents('.list-box')
                var key = "cart" + parent.attr("data-cart-id")
                if (cart[key].number < 2)
                    return false
                cart[key].number--
                cart[key].all_price = cart[key].number * cart[key].price
                up_cart_num(parent, key)
            })

            function up_cart_num($obj, key) {
                var data = cart[key]
                loading.show()
                $.post("/api/up_cart_num", data, function (e) {
                    if (e.errorCode == 0) {
                        check_data($obj, key)
                    } else {
                        alert(e.errorMsg)
                        window.location.reload();
                    }
                    loading.hide()
                })
            }

            function check_data($obj, key) {
                $obj.find('.textWrap-input').val(cart[key].number)
                $obj.find('.commodity-number').text(cart[key].number)
                $obj.find('.commodity-price').text(cart[key].all_price)
                if (cart[key].number > 1) {
                    m_selnum_active($obj)
                } else {
                    m_selnum_none($obj)
                }
            }

            function m_selnum_none($obj) {
                $obj.find(".m-selnum").css('border-left', '0.1rem solid #f1f1f1');
                $obj.find('.m-selnum-minus').css({
                    "border-top": "1px solid #f1f1f1",
                    "border-bottom": "1px solid #f1f1f1",
                    "color": "#f1f1f1"
                });
            }

            function m_selnum_active($obj) {
                $obj.find(".m-selnum").css('border-left', '0.1rem solid #666666');
                $obj.find('.m-selnum-minus').css({
                    "border-top": "1px solid #666666",
                    "border-bottom": "1px solid #666666",
                    "color": "#666666"
                });
            }

            $(".list-circle").on("click", function () {
                if ($(this).hasClass("circle")) {
                    $(this).removeClass("circle")
                    $(this).addClass("circle-active")
                } else {
                    $(this).removeClass("circle-active")
                    $(this).addClass("circle")
                }
            })
        </script>
    </main>

@endsection
@include('base.bottom_nav')